<template>
  <div class="dialog-container">
    <el-dialog
      v-model="dialogVisible"
      :before-close="handleClose"
      :title="translate('选择图片')"
      width="40%"
    >
      <div class="table">
        <div class="condition">
          <span class="color_494949 ft12 pr5">
            {{ translate('商品编码') }}：
          </span>
          <ElInput
            v-model="CSImageName"
            class="w164 mr14"
            :placeholder="translate('请输入图片名称')"
          />
          <ElButton class="settingBtn" type="primary" @click="search">
            {{ translate('查询') }}
          </ElButton>
        </div>
        <ElTable
          ref="multipleTableRef"
          v-loading="loading"
          :border="true"
          :data="tableData"
          @selection-change="handleSelectionChange"
        >
          <ElTableColumn type="selection" width="55" />
          <ElTableColumn
            v-if="imgtype != 'updateImg' || imgtype != 'updateopenImg'"
            :label="translate('图片名称')"
            prop="CSImageName"
            width="auto"
          />
          <ElTableColumn
            v-if="imgtype === 'updateImg' || imgtype === 'updateopenImg'"
            :label="translate('图片编码')"
            prop="LogoCode"
            width="auto"
          />
          <ElTableColumn :label="translate('图片')">
            <template #default="{ row }">
              <div class="img-container">
                <ElImage
                  fit="contain"
                  :hide-on-click-modal="true"
                  :initial-index="9"
                  :preview-src-list="
                    imgtype === 'updateImg' || imgtype === 'updateopenImg'
                      ? [row.LogoImage]
                      : [row.CSImage]
                  "
                  :src="
                    imgtype === 'updateImg' || imgtype === 'updateopenImg'
                      ? row.LogoImage
                      : row.CSImage
                  "
                  :z-index="99999"
                  :zoom-rate="1.2"
                />
              </div>
            </template>
          </ElTableColumn>
        </ElTable>
        <div v-if="total > 0" class="pagination">
          <ElPagination
            background
            :current-page="searchInfo.pageNo"
            :layout="layout"
            :page-size="searchInfo.pageSize"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">{{ translate('取消') }}</el-button>
          <el-button type="primary" @click="confirm">
            {{ translate('确定') }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { ElTable } from 'element-plus'
  import { CSImgGetPageData, LogoImgGetPageData } from '@/api/mupro'
  import { translate } from '@/i18n'
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    imgtype: {
      type: String,
      default: '',
    },
  })
  const dialogVisible = ref(props.visible)
  const CSImageName = ref('')
  const multipleTableRef: any = ref(null)
  watch(
    () => props.visible,
    () => {
      dialogVisible.value = props.visible
      if (props.visible) multipleTableRef.value?.clearSelection()
      gettableData()
    }
  )
  // 列表
  const searchInfo = reactive({
    pageNo: 1,
    pageSize: 20,
    tableName: '',
    sort: '',
    order: '',
    wheres: `[{"name":"CSImageName","value":${CSImageName.value},"displayType":"like"}]`,
    export: false,
    value: '',
  })
  const loading = ref(false)
  const layout = ref('total, sizes, prev, pager, next, jumper')
  const tableData = ref([])
  const total = ref(0)
  // 获取表格数据
  const gettableData = async () => {
    loading.value = true
    if (props.imgtype === 'updateImg' || props.imgtype === 'updateopenImg') {
      const { data } = await LogoImgGetPageData(searchInfo)
    } else {
      const { data } = await CSImgGetPageData(searchInfo)
    }
    loading.value = false
    tableData.value = data?.rows || []
    total.value = data?.total || 0
  }
  gettableData()
  //分页条数切换
  const handleSizeChange = (val: any) => {
    searchInfo.pageSize = val
    gettableData()
  }
  //分页切换
  const handleCurrentChange = (val: any) => {
    searchInfo.pageNo = val
    gettableData()
  }
  // 搜索
  const search = () => {
    searchInfo.pageNo = 1
    if (CSImageName.value.trim() !== '') {
      const arr = []
      CSImageName.value.trim() !== '' &&
        arr.push({
          name: 'CSImageName',
          value: CSImageName.value,
          displayType: 'like',
        })
      searchInfo.wheres = JSON.stringify(arr)
    } else {
      searchInfo.wheres = `[{"name":"CSImageName","value": '',"displayType":"like"}]`
    }
    gettableData()
  }
  const multipleSelection: any = ref([])
  const handleSelectionChange = (val: any[]) => {
    multipleSelection.value = val
  }
  const emit = defineEmits(['close', 'confirm'])
  const handleClose = () => {
    dialogVisible.value = false
    emit('close', dialogVisible.value)
  }
  const confirm = () => {
    emit('confirm', multipleSelection.value)
    // dialogVisible.value = false
  }
</script>

<style lang="scss" scoped>
  .table {
    .condition {
      margin-bottom: 20px;
      .color_494949 {
        color: #494949;
      }

      .w164 {
        width: 164px;
      }

      .mb20 {
        margin-bottom: 20px;
      }

      .mr14 {
        margin-right: 14px;
      }
    }
  }
  .tag {
    font-size: 14px;
  }
</style>
